<template>
	<div style="width: 80%;margin-top: 50px;">
		<el-form :model="formData" ref="formRef" :rules="formRules" label-width="12rem" >
			<el-row type="flex" :gutter="10">
				<el-col :span="24">
					<el-form-item label="头像" prop="avatar">
						<el-upload-image v-model="formData.avatar" :limit="1" :title="title"></el-upload-image>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="账号" prop="username" style="width: 60%;">
						<el-input v-model="formData.username" disabled clearable placeholder="请输入账号"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="密码" prop="password" style="width: 60%;">
						<el-input v-model="formData.password" clearable placeholder="请输入即更换,不填则不变"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="昵称" prop="nickname" style="width: 60%;">
						<el-input v-model="formData.nickname" clearable placeholder="请输入昵称"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="身份" prop="role"  style="width: 60%;">
						<el-select v-model="formData.role" size="mini" placeholder="请选择身份" disabled>
							<el-option v-for="item in rolelist" :key="item.id" :label="item.title" :value="item.id">
							</el-option>
						</el-select>
						<!-- <el-input v-model="formData.age" clearable  type="number" placeholder="请输入年龄段"></el-input> -->
					</el-form-item>
				</el-col>
				<!-- <el-col :span="12">
					<el-form-item label="课程分类" prop="cate_name">
						<el-input v-model="formData.cate_name" clearable placeholder="请输入课程分类"></el-input>
					</el-form-item>
				</el-col> -->
				
				<!-- <el-col :span="12">
					<el-form-item label="课程分类" prop="cate_id">
						<el-cascader
						v-model="formData.cate_id"
						    :options="typelist"
						    :props="props"
							clearable
						    ></el-cascader>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="教材教具费" prop="price">
						<el-input v-model="formData.price" clearable type="number" placeholder="请输入教材教具费"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="积分抵扣价" prop="score_price">
						<el-input v-model="formData.score_price" clearable  type="number" placeholder="请输入积分抵扣价"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="课时" prop="class_hour">
						<el-input v-model="formData.class_hour" clearable  type="number" placeholder="请输入课时"></el-input>
					</el-form-item>
				</el-col> -->
				<el-col :span="24">
					<el-form-item label="E-mail" prop="email"  style="width: 60%;">
						<el-input v-model="formData.email" clearable   placeholder="请输入E-mail"></el-input>
					</el-form-item>
				</el-col>
				<!-- <el-col :span="24">
				    <el-form-item prop="content" label="详情">
				        <div style="border: 1px solid #ccc;">
				            <Toolbar
				                style="border-bottom: 1px solid #ccc,width:375px"
				                :editor="editor"
				                :defaultConfig="toolbarConfig"
				                :mode="mode"
				            />
				            <Editor
				                style="height: 500px; overflow-y: auto;width:375px"
				                v-model="formData.content"
				                :defaultConfig="editorConfig"
				                :mode="mode"
				                @onCreated="onCreated"
				            />
				        </div>
				    </el-form-item>
				</el-col> -->
			</el-row>
			<el-row type="flex" justify="center" style="margin-top:50px">
				<el-button type="primary" icon="el-icon-check" @click="onConfirm">确认</el-button>
				<el-button type="default" icon="el-icon-close" @click="onCancel">取消</el-button>
			</el-row>
		</el-form>
	</div>
</template>

<script>
	// import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
	import Editor from '@/components/editor.vue'
	import { imghttp,get,post,del } from '@/assets/js/http'
	export default {
		name: "member-search",
		props: {
			// formData: {
			// 	type: Object,
			// 	default: () => {}
			// },
		},
		components: {
			"el-upload-image": () => import("@/components/el-upload-image.vue"),
			Editor,
			// Toolbar
		},
		data() {
			return {
				props: {
				    label: "name",
				    value: "id",
				    children: "child",
				    checkStrictly: true
				},
				editor: null,
				toolbarConfig: {},
				editorConfig: {
				    MENU_CONF: {
				        uploadImage: {
				            fieldName: "file",
				            server: "/admin/ajax/upload",
				            headers: {
				                batoken: this.$store.state.token
				            },
				            /* eslint-disable-next-line */
				            customInsert(res, insertFn) {
				                insertFn(
				                    $store.getters.baseUrl + res.data.file.url
				                );
				            }
				        }
				    },
					uploadVideo: {
						fieldName: "file",
						server: "/admin/ajax/upload",
						headers: {
							batoken: this.$store.state.token,
						},
						/* eslint-disable-next-line */
						customInsert(res, insertFn) {
							insertFn($store.getters.baseUrl + res.data.file.url)
						},
					},
				},
				mode: "default",
				formData:{
					avatar:[],
					password:'',
					nickname:'',
					name:'',
					email:'',
				},
				formRules: {
					avatar: [{
						required: true,
						message: '请上传',
						trigger: 'change'
					}],
					nickname: [{required: true,message: '请输入',trigger: 'change'},],
					name: [{required: true,message: '请输入',trigger: 'change'},],
					username: [{required: true,message: '请输入',trigger: 'change'},],
					email: [
						  { required: true, message: '请输入邮箱地址', trigger: 'blur' },
						  { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
						],
					// score_price: [{required: true,message: '请输入',trigger: 'change'},],
					// class_hour: [{required: true,message: '请输入',trigger: 'change'},],
					// age: [{required: true,message: '请输入',trigger: 'change'}],
					// content: {
					//     required: true,
					//     message: "此项为必填项"
					// },
				},
				title:'请上传1:1比例的图片',
				typelist:[],
				rolelist:[{id:1,title:'超级管理组'},{id:2,title:'课程供应商'},{id:6,title:'产品供应商'},
				{id:8,title:'社区管理员'},{id:9,title:'总审核员'}],
			};
		},
		beforeDestroy() {
		    const editor = this.editor;
		    if (editor == null) return;
		    editor.destroy();
		},
		mounted() {
			this.getmyinfo()
		},
		methods: {
			onCreated(editor) {
			    this.editor = Object.seal(editor);
			},
			onConfirm() {
				this.$refs.formRef.validate((valid) => {
					if (valid) {
						 this.formData.supplier_id = this.$store.state.id
						 this.formData.avatar = this.formData.avatar[0]?.url
						// alert('submit!');
						console.log(this.formData)
						post({
							url:'/admin/index/edit_pass',
							data:this.formData,
							successTip: true,
						}).then(res=>{
							this.onLogout()
						})
						// this.$emit("search", this.formData);
						// this.$parent.$emit("update:visible", false);
						// this.$refs.formRef.resetFields()
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			onLogout() {
			     post({
			        url: "/admin/index/logout",
			        data: {},
			        loading: true
			    });
			    this.$message.success("修改成功");
			    this.$store.commit("logout");
			    this.$router.replace("/login");
			},
			onCancel() {
				this.$parent.$emit("update:visible", false);
				this.$refs.formRef.resetFields();
			},
			async getmyinfo() {
				// this.$loading()
				// let { list,total } = 
				await get({
					url: '/admin/index/admin_info',
				}).then(res => {
					this.formData = res
					this.formData.avatar=[{
						name:res.avatar,
						url:res.avatar,
					}]
				})
			},
		}
	};
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>
